﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../../easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../../easyui/themes/icon.css">
    <script src="../../../easyui/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="../../../easyui/jquery.easyui.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        /*
        *   时间：2013年4月14日 16:36:11
        *	datagrid属性说明
        *  1. url 请求数据的链接地址
        *  2. fitColumns 是否自动适应列宽 
        *  3. resizeHandle left-向左拖动列头 right-向右拖动 both-左右都可以拖动
        *  4. striped true-表格隔行有底色
        *  5. method 请求远程数据的方式 默认为post .还可以为get
        *  6. idField 主键列，默认为null
        *  7. loadMsg 取数据时的提示信息
        *  8. pagination 为true时在表格底部添加分页工具条，默认为false
        *  9. rownumbers 为true时显示行号列，默认为false
        *  10.pagePosition 分页工具条显示位置，可能的值为 top,bottom,both，默认为bottom
        *  11.pageNumber[设置了pagiantion属性之后需要初始化该属性]页号，默认为1
        *  12.pageSize [设置了pagiantion属性之后需要初始化该属性]页号，默认为10
        *  13.pageList [设置了pagiantion属性之后需要初始化该属性]页号，默认为[10,20,30,40,50]
        *  14.queryParams为一个object对象. 如 {name:'easyui',subject:'datagrid'}
        *  15.sortName 定义排序列
        *  16.sortOrder 可能的值为 asc,desc，默认为asc
        *  17.remoteSort 是否在服务端排序，默认为true
        *  18.showHeader 是否显示row header 
        *  19.showFooter 是否显示row footer
        *  20.rowStyler 函数。有2个参数,index-当前行号 row-当前行数据


        *   知识点说明
        *   1.点击翻页按钮，会请求url链接
        *   2.columns成员的 field属性区分大小写
        *   3.datagrid 设置分页以后，会传递参数 page-当前页 rows-每页条数 两个参数到请求端
        *   4.设置排序后会传递 sort-排序字段 order-排序方式[asc,desc] 两个参数到请求端


        *   时间：2013年4月14日 19:04:57
        *   关于 pagination 的几点说明
        *   1.根据服务端返回的json的 total 节点来设置总条数
        *   2.
        */

        $(function () {
            //设置分页控件  
            var p = $('#dg').datagrid('getPager');  
            $(p).pagination({  
                pageSize: 10,//每页显示的记录条数，默认为10  
                pageList: [5,10,15],//可以设置每页记录条数的列表  
                beforePageText: '第',//页数文本框前显示的汉字  
                afterPageText: '页    共 {pages} 页',  
                displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录'  
                /*onBeforeRefresh:function(){ 
                    $(this).pagination('loading'); 
                    alert('before refresh'); 
                    $(this).pagination('loaded'); 
                }*/ 
            });  
        });

    </script>
</head>
<body>
    <table id="dg" class="easyui-datagrid" data-options="url:'../../../Handler/ArchiveListHandler.ashx',rownumbers:true,fitColumns:true,singleSelect:true, resizeHandle:'both',striped:true,pagination:true,pagePosition:'both',sortName:'createtime',sortOrder:'desc'">
        <thead>
            <tr>
                <th data-options="field:'ArchiveNum',align:'center',width:100">
                    档号
                </th>
                <th style="text-align: center;" data-options="field:'Title',halign:'center',width:200">
                    题名
                </th>
                <th data-options="field:'ArchiveSource',align:'center',width:100">
                    档案来源
                </th>
            </tr>
        </thead>
    </table>
</body>
</html>
